<template>
  <view>
    <!-- 搜索栏 -->
    <view class="search-box">
      <uni-search-bar focus="true" @input="input" radius="50" cancelButton="none"></uni-search-bar>
    </view>
    <!-- 搜索内容 -->
    <view class="search-list" v-if="searchList.length!==0">
      <view @click="searchClickHandler(item.goods_id)" class="search-item" v-for="(item,index) in searchList"
        :key="index">
        <view class="search-text">{{item.goods_name}}</view>
        <view class="search-icon">
          <uni-icons type="forward" size="20"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="search-history" v-else>
      <view class="title">
        <view style="font-size: 14px;">
          搜索历史
        </view>
        <view>
          <uni-icons @click="clearHistory()" type="trash" size="23"></uni-icons>
        </view>
      </view>
      <view class="text">
        <uni-tag @click="goList(item)" style="font-size: 16px;" :text="item" v-for="(item,index) in historyList"
          :key="index"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        keyword: '',
        searchList: [],
        historyList: []
      };
    },
    methods: {
      input(value) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.keyword = value
          if (this.keyword === '') {
            this.searchList = []
            return
          }
          this.getSearchList()
          this.pushHistoryList(value)
          setTimeout(() => {
            if (this.searchList.length === 0) {
              return uni.$showMsg("查找内容为空")
            }
          }, 100)
        }, 500)
      },
      async getSearchList() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch', {
          'query': this.keyword
        })
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.searchList = res.message
      },
      searchClickHandler(id) {
        uni.navigateTo({
          url: "/subpkg/goods_detail/goods_detail?goods_id=" + id
        })
      },
      pushHistoryList(value) {
        this.historyList.unshift(value)
        this.historyList = [...new Set(this.historyList)]
        uni.setStorageSync("history", JSON.stringify(this.historyList))
      },
      clearHistory() {
        uni.removeStorageSync("history")
        this.historyList = []
      },
      goList(value) {
        uni.navigateTo({
          url: "/subpkg/goods-list/goods-list?query=" + value
        })
      }
    },
    onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync('history') || '[]')
    }
  }
</script>

<style lang="scss">
  .search-box {
    background-color: #55aaff;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .search-list {
    .search-item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      box-shadow: silver 1px 1px 1px;

      .search-text {
        line-height: 50rpx;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .search-history {
    .title {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      box-shadow: silver 1px 1px 1px;
      margin-bottom: 15rpx;
    }

    .text {
      display: flex;
      flex-wrap: wrap;

      .uni-tag {
        margin: 5rpx;
        background-color: #eee;
        color: black;
        font-size: 14px;
        border: 0;
        padding: 10rpx 20rpx;
      }
    }
  }
</style>